<template>

<!--  <div>-->
<!--    <img src="../assets/layout/left/image-arrow.png" alt="icon" class="icon" />-->
<!--    <div class="background-container">-->
<!--      <div class="section1" id="section1">文物</div>-->
<!--      <div class="section2" id="section2">船体零部件</div>-->
<!--      <div class="section3" id="section3"></div>-->
<!--    </div>-->


<!--  </div>-->

  <div class="container">
    <div class="arrow"></div>
    <div class="text">
      <div>文物</div>
      <div>船体零部件</div>
    </div>
  </div>


</template>

<script setup lang="ts">
</script>
<style scoped>


.container {
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
/*  background-image: url('@/assets/layout/left/bg-artifact.png'); !* 替换为你的背景图片路径 *!*/
  background-image: url('@/assets/layout/left/bg-artifact.png');
  background-size: cover;
  background-repeat: no-repeat;
  //background-position: center;
  padding: 10px;
  width: 385px;
  height: 100px; /* 根据需要调整高度 */
  border: 20px solid red;
}
.arrow {
  z-index: 10;
  width: 20px; /* 根据需要调整箭头大小 */
  height: 20px;
  background: url('../assets/layout/left/image-arrow.png') no-repeat center; /* 替换为你的箭头图片路径 */
  background-size: contain;
}
.text {
  z-index: 10;
  display: flex;
  align-items: center;
}
.text div {
  z-index: 10;
  margin: 0 10px;
  color: white; /* 根据背景图片调整文字颜色 */
  font-size: 18px; /* 根据需要调整字体大小 */
}



/*
.background-container {
  width: 400px; !* 宽度 *!
  z-index: 10;
  display: flex;
  justify-content: space-around;
!*  align-items: center;*!
  height: 32px;
  //height: 100vh; !* 视口高度 *!
  background-image: url('@/assets/layout/left/bg-artifact.png');
  background-size: cover;
  background-repeat: no-repeat;
  //background-position: center;
  //background-size: cover;
}

.section1 {
  flex: 1; !* 每个部分占据相同的空间 *!
  font-size: 16px;
  margin-left: 40px; !* 添加外边距以分隔各个部分 *!
}

.section2 {
  flex: 1; !* 每个部分占据相同的空间 *!
  font-size: 16px;
  margin-left: -130px; !* 添加外边距以分隔各个部分 *!
}

.section {
  flex: 1; !* 每个部分占据相同的空间 *!
  font-size: 16px;
  margin: 0 10px; !* 添加外边距以分隔各个部分 *!
  //padding: 20px;
  //box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); !* 添加阴影 *!
   !* width: 30%根据需要调整宽度 *!
  !*padding: 20px;*!
  !*background-color: rgba(255, 255, 255, 0.8); !* 半透明背景 *!*!
!*  text-align: center;
  border-radius: 10px;*!
}*/
</style>
